<template>
  <CellBox title="发货明细" isTop>
    <TableBoxMx :data="{
      disabled: !isEdit,
      tbody: data.saleOrderStatementDeliveryDetails,
      thead: [
        {
          label: '发货单号',
          prop: 'deliveryBillNo',
          align: 'center',
          width: 180,
        },
        {
          label: '发货日期',
          prop: 'expressTime',
          align: 'center',
          width: 120,
        },
        {
          label: '协议书号',
          prop: 'xieYiShuHao',
          align: 'center',
          width: 130,
        },
        {
          label: '产品名称',
          prop: 'productName',
          align: 'left',
          width: 260,
        },
        {
          label: '产品型号',
          prop: 'productSpecificationName',
          align: 'left',
          width: 120,
        },
        {
          label: '版本',
          prop: 'productVersion',
          align: 'center',
          width: 60,
        },
        {
          label: '单价',
          prop: 'price',
          align: 'center',
          width: 60,
        },
        {
          label: '订单数量',
          prop: 'productQuantity',
          align: 'center',
          width: 100,
        },
        {
          label: '发货数量',
          prop: 'number',
          align: 'center',
          width: 100,
        },
        {
          label: '结算数量',
          prop: 'statementNumber',
          align: 'center',
          width: 120,
          formProp: 'saleOrderStatementDeliveryDetails',
          formType: 'number'
        },
        {
          label: '起步价',
          prop: 'minimumAmount',
          align: 'center',
          width: 100,
        },
        {
          label: '产品总额',
          prop: 'amount',
          align: 'center',
          width: 100,
        },
        {
          label: '快递费用',
          prop: 'courierFee',
          align: 'center',
          width: 100,
        },
        {
          label: '费用承担',
          prop: 'courierFeeType',
          align: 'center',
          width: 160,
          // formProp: 'saleOrderStatementDeliveryDetails',
          // formType: 'select',
          options: proxy.$optionsArr.courierFeeType
        },
        {
          label: '客户快递费用',
          prop: 'customerCourierFee',
          align: 'center',
          width: 100,
        },
        {
          label: '费用总额',
          prop: 'totalAmount',
          align: 'center',
          width: 100,
        },
        {
          label: '收货人',
          prop: 'receiverName',
          align: 'center',
          width: 100,
        },
        {
          label: '收货地址',
          prop: 'receiveAddressAll',
          align: 'left',
          width: 160,
        },
        {
          label: '备注',
          prop: 'remark',
          align: 'left',
          width: null,
          formType: 'text',
        },
      ],
      operation: [
        {
          label: '删除',
          icon: 'Delete',
        }
      ],
    }">
      <template #amount="{ row }">
        <div class="flex-c">
          <span class="text-color-error">{{ getAmount(row) }}</span>
          <s class="text-color-info" v-if="getProductTotalPrice(row) < row.totalAmount">
            {{ getProductTotalPrice(row) }}</s>
        </div>
      </template>
      <template #customerCourierFee="{ row }">
        <span class="text-color-error">{{ getCustomerFee(row) }}</span>
      </template>
      <template #totalAmount="{ row }">
        <span class="text-color-error">{{ getTotalAmount(row) }}</span>
      </template>
    </TableBoxMx>
    <div class="m-t-8" v-if="isEdit">
      <el-button class="wAuto" icon="Plus" @click="openPup">选择发货明细</el-button>
      <SelectCom :pup="pup" :table="pup.table" :selectable="(row: any) => {
        const _arr = data.saleOrderStatementDeliveryDetails.map((el: any) => el.deliveryMxCode)
        console.log(_arr);
        return !_arr.includes(row.deliveryMxCode)
      }" isCheckbox @selectBtn="selectBtn" @searchBtn="searchBtn">
        <template #search="{ search }">
          <ElFormItemBox label="日期范围" prop="">
            <ElDaysBox :data="search" :dataName="['deliveryDateStart', 'deliveryDateEnd']" />
          </ElFormItemBox>
        </template>
      </SelectCom>
    </div>
  </CellBox>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;
    isEdit?: boolean;
  }>(),
  {

  },
);
const pup: any = reactive({
  state: false,
  typeName: 0,
  title: `发货明细`,
  number: 0,
  table: {
    rowKey: 'deliveryBillNo',
    title: '发货明细列表',
    search: {
      pageIndex: 1, // 当前页码 (从1开始)
      pageSize: 30, // 每页显示数据的数量
      queryDataBaseFiled: "xieYiShuHao", // 关键字查询字段，空值查询全部
      likeWords: "", // 查询关键字，空值查询全部
      beginTime: "", // 日期范围-开始时间
      endTime: "", // 日期范围-结束时间
      reconciliationStatus: 0, // 对账状态--1查全部、0-未对账、1-已对账
      customerCode: "", // 客户编码
      deliveryDateStart: "", // 发货日期-开始
      deliveryDateEnd: "" // 发货日期-结束
    },
    resetSearch: {
      deliveryDateStart: '',
      deliveryDateEnd: '',
    },
    tbody: [],
    thead: [
      {
        label: '发货单号',
        prop: 'deliveryBillNo',
        align: 'center',
        width: 180
      },
      {
        label: '发货日期',
        prop: 'expressTime',
        align: 'center',
        width: 140,
      },
      {
        label: '协议书号',
        prop: 'xieYiShuHao',
        align: 'center',
        width: 150,
        isCanSearch: true
      },
      {
        label: '客户单号',
        prop: 'customerBillNo',
        align: 'left',
        width: 120,
        isCanSearch: true
      },
      {
        label: '产品名称',
        prop: 'productName',
        align: 'left',
        width: 220,
        isCanSearch: true
      },
      {
        label: '成品型号',
        prop: 'productSpecificationName',
        align: 'center',
        width: 120
      },
      {
        label: '版本',
        prop: 'productVersion',
        align: 'center',
        width: 60
      },
      {
        label: '版面',
        prop: 'productLayout',
        align: 'center',
        width: 60
      },
      {
        label: '发货数量',
        prop: 'deliveryQuantity',
        align: 'center',
        width: 120,
      },
      {
        label: '单位',
        prop: 'productUnit',
        align: 'center',
        width: 60
      },
      {
        label: '单价',
        prop: 'unitPrice',
        align: 'center',
        width: 80
      },
      {
        label: '起步价',
        prop: 'minimumAmount',
        align: 'center',
        width: 80
      },
      {
        label: '快递费用',
        prop: 'expressCost',
        align: 'center',
        width: 100
      },
      {
        label: '费用归属',
        prop: 'courierFeeType',
        align: 'center',
        width: 100,
        options: proxy.$optionsArr.courierFeeType
      },
      {
        label: '收货人',
        prop: 'receiverName',
        align: 'center',
        width: 120,
        isCanSearch: true
      },
      {
        label: '收货地址',
        prop: 'receiveAddressAll',
        align: 'center',
        width: 220,
        isCanSearch: true
      },
      {
        label: '备注',
        prop: 'deliveryMxRemark',
        align: 'left',
        width: null,
      }
    ],
  }
});
//商品价格
const getProductTotalPrice = (row: any) => {
  return proxy.$count(`${row.statementNumber || 0}*${row.price || 0}`)
}
//商品总价
const getAmount = (row: any) => {
  //商品总价
  const _productTotalPrice = getProductTotalPrice(row)
  //是否小于最低金额
  const _totalPrice = _productTotalPrice < row.minimumAmount ? row.minimumAmount : _productTotalPrice
  row.amount = _totalPrice
  return row.amount
}
//获取客户费用
const getCustomerFee = (row: any) => {
  let _customerCourierFee = 0
  switch (row.courierFeeType) {
    case 1://公司承担
      _customerCourierFee = 0
      break;
    case 2://各自一半
      _customerCourierFee = proxy.$count(`${row.courierFee}/2`)
      break;
    default://客户承担
      _customerCourierFee = row.courierFee || 0
      break;
  }
  row.customerCourierFee = _customerCourierFee
  return _customerCourierFee
}
//费用总额
const getTotalAmount = (row: any) => {
  const _totalAmount = proxy.$count(`${row.amount || 0}+${row.customerCourierFee || 0}`)
  row.totalAmount = _totalAmount
  return _totalAmount
}
const openPup = () => {
  pup.state = true
  searchBtn()
}
const searchBtn = () => {
  const _table = pup.table
  _table.loading = true
  proxy.$api.OrderBusniess.GetSaleOrderDeliveryMxView({
    ..._table.search,
    customerCode: props.data.customerCode
  })
    .then((res: any) => {
      _table.tbody = res.list
      _table.search.totalCount = res.totalCount;
      _table.loading = false
    })
    .catch(() => {

      _table.loading = false
    });
}
const selectBtn = (arr: any) => {
  const _list = props.data.saleOrderStatementDeliveryDetails
  const _arr = arr.map((el: any) => {
    let _customerCourierFee = 0
    switch (el.courierFeeType) {
      case 1://公司承担
        _customerCourierFee = 0
        break;
      case 2://各自一半
        _customerCourierFee = el.expressCost / 2
        break;
      default://客户承担
        _customerCourierFee = el.expressCost
        break;
    }
    return {
      ...el,
      saleOrderStatementDeliveryDetailCode: "", // 唯一编码
      deliveryMxCode: el.deliveryMxCode, // 发货明细编码-不可重复
      price: el.unitPrice, // 单价
      number: el.deliveryQuantity, // 数量
      remark: el.remark, // 备注
      courierFee: el.expressCost, // 快递费用
      statementNumber: el.deliveryQuantity, // 对账数量
      courierFeeType: el.courierFeeType, // 快递费用归属-默认是客户设置的类型：0-客户承担；1-公司承担；2-各自一半，默认0
      customerCourierFee: _customerCourierFee, // 客户快递费用
      receiverName: el.receiverName, // 收货人
      receiveAddressAll: el.receiveAddressAll, // 收货地址
      minimumAmount: el.minimumAmount, // 起步价
      expressTime: el.expressTime, // 发货时间
    }
  })
  _list.push(..._arr)
}
onUnmounted(() => { });
</script>
<style scoped lang="scss"></style>
